<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圆</title>
    <style>
        body{
            background:#000;
        }
        @keyframes an1{
            100%{
                transform:rotateX(1turn) rotateY(1turn);
            }
        }
        #wrapper{
            width:133px;
            height:200px;
            margin:100px auto;
            -webkit-transform-style:preserve-3d;
            -moz-transform-style:preserve-3d;
            -ms-transform-style:preserve-3d;
            -o-transform-style:preserve-3d;
            transform-style:preserve-3d;
            position:relative;
            transform:rotateX(-10deg);
            border:solid 1px red;
        }
        #wrapper img{
            position:absolute;
        }
    </style>
</head>
<body>
    <div id="wrapper">
        <img src="img/1.jpg" alt="">
        <img src="img/2.jpg" alt="">
        <img src="img/3.jpg" alt="">
        <img src="img/4.jpg" alt="">
        <img src="img/5.jpg" alt="">
        <img src="img/6.jpg" alt="">
        <img src="img/7.jpg" alt="">
        <img src="img/8.jpg" alt="">
        <img src="img/9.jpg" alt="">
        <img src="img/10.jpg" alt="">
        <img src="img/11.jpg" alt="">
    </div>
    <script>
        var cssTransform = function(element,value){
            var data = ["webkit","moz","ms","o",""];
            for(var i = 0,max = data.length; i < max; i++){
                element.style[data[i] + "Transform"] = value;
            }
        }

        var imgList = document.querySelectorAll("img");
        for(var i = 0; i < imgList.length;i++){
            cssTransform(imgList[i],"rotateY("+(360/imgList.length*i)+"deg) translateZ(300px)");
        }

        var rotY = 0;
        var rotX = 0;
        document.onmousedown = function(e){
            var disX = e.clientX;
            var disY = e.clientY;
            e.preventDefault();
            document.onmousemove = function(e){
                var x = e.clientX;
                var y = e.clientY;
                console.log(x - disX,y - disY);
                rotX -= (y - disY) * 0.2;
                rotY += (x - disX) * 0.2;
                // var rotY = 0;
                cssTransform(wrapper,"rotateX("+ rotX +"deg) rotateY("+rotY+"deg)");
                disX = x;
                disY = y;
            }
            document.onmouseup = function(){
                document.onmousemove = null;
            }
        }
    </script>
</body>
</html>
